<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络监控大屏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: #0a0e29;
            color: #fff;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }

        /* 添加科技感背景 */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                radial-gradient(circle at 20% 30%, rgba(41, 128, 185, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(231, 76, 60, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(46, 204, 113, 0.1) 0%, transparent 50%);
            z-index: -1;
        }

        .dashboard {
            width: 100%;
            height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .header {
            text-align: center;
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(16, 36, 71, 0.7);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
            border: 1px solid rgba(64, 164, 255, 0.3);
            position: relative;
            overflow: hidden;
        }

        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: shimmer 8s infinite;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #fff;
            text-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
            letter-spacing: 2px;
        }

        .subtitle {
            font-size: 1.2rem;
            color: #4fc3f7;
            margin-bottom: 10px;
        }

        .datetime {
            font-size: 1rem;
            color: #81d4fa;
        }

        .main-content {
            display: flex;
            flex: 1;
            gap: 20px;
        }

        .network-panel {
            flex: 3;
            background: rgba(16, 36, 71, 0.7);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 150, 255, 0.3);
            border: 1px solid rgba(64, 164, 255, 0.3);
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

        .stats-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .stat-card {
            background: rgba(16, 36, 71, 0.7);
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 150, 255, 0.2);
            border: 1px solid rgba(64, 164, 255, 0.3);
            padding: 15px;
            flex: 1;
        }

        .stat-card h3 {
            color: #4fc3f7;
            margin-bottom: 15px;
            font-size: 1.1rem;
            border-bottom: 1px solid rgba(64, 164, 255, 0.3);
            padding-bottom: 8px;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.9rem;
            color: #81d4fa;
        }

        .stat-trend {
            font-size: 0.8rem;
            margin-top: 5px;
        }

        .trend-up {
            color: #4caf50;
        }

        .trend-down {
            color: #f44336;
        }

        #network-svg {
            width: 100%;
            height: 100%;
        }

        .node {
            cursor: pointer;
            transition: all 0.3s ease;
            filter: drop-shadow(0 0 5px rgba(0, 150, 255, 0.5));
        }

        .node:hover {
            filter: drop-shadow(0 0 15px rgba(0, 150, 255, 0.8));
            transform: scale(1.05);
        }

        .node-label {
            font-size: 12px;
            font-weight: bold;
            text-anchor: middle;
            pointer-events: none;
            fill: white;
        }

        .link {
            stroke: rgba(79, 195, 247, 0.7);
            stroke-width: 2;
            fill: none;
            transition: all 0.3s ease;
        }

        .link:hover {
            stroke: #4fc3f7;
            stroke-width: 3;
            filter: drop-shadow(0 0 5px rgba(79, 195, 247, 0.7));
        }

        .link-label {
            font-size: 10px;
            font-weight: bold;
            fill: #ff9800;
            text-anchor: middle;
            pointer-events: none;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 0.7; }
            50% { opacity: 1; }
            100% { opacity: 0.7; }
        }

        .tooltip {
            position: absolute;
            padding: 15px;
            background: rgba(10, 25, 47, 0.9);
            color: white;
            border-radius: 8px;
            pointer-events: none;
            font-size: 14px;
            z-index: 10;
            max-width: 300px;
            box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
            border: 1px solid rgba(64, 164, 255, 0.5);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .tooltip h3 {
            margin-bottom: 8px;
            color: #4fc3f7;
            border-bottom: 1px solid rgba(64, 164, 255, 0.3);
            padding-bottom: 5px;
        }

        .tooltip p {
            margin-bottom: 5px;
            line-height: 1.4;
        }

        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .status-normal {
            background: #4caf50;
            box-shadow: 0 0 10px #4caf50;
        }

        .status-warning {
            background: #ff9800;
            box-shadow: 0 0 10px #ff9800;
        }

        .status-critical {
            background: #f44336;
            box-shadow: 0 0 10px #f44336;
        }

        .data-flow {
            stroke-dasharray: 5;
            animation: flow 20s linear infinite;
        }

        @keyframes flow {
            to {
                stroke-dashoffset: -1000;
            }
        }

        .alert-panel {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 300px;
            background: rgba(16, 36, 71, 0.9);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
            border: 1px solid rgba(255, 0, 0, 0.3);
            padding: 15px;
            max-height: 200px;
            overflow-y: auto;
        }

        .alert-panel h3 {
            color: #ff5252;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .alert-item {
            padding: 8px;
            border-bottom: 1px solid rgba(255, 82, 82, 0.3);
            font-size: 0.9rem;
        }

        .alert-item:last-child {
            border-bottom: none;
        }

        .alert-time {
            color: #81d4fa;
            font-size: 0.8rem;
        }

        .alert-critical {
            color: #ff5252;
        }

        .alert-warning {
            color: #ff9800;
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .main-content {
                flex-direction: column;
            }

            .stats-panel {
                flex-direction: row;
            }

            .alert-panel {
                position: relative;
                bottom: auto;
                right: auto;
                width: 100%;
                margin-top: 20px;
            }
        }

        @media (max-width: 768px) {
            .stats-panel {
                flex-direction: column;
            }

            h1 {
                font-size: 1.8rem;
            }

            .subtitle {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <div class="header">
            <h1>网络监控大屏</h1>
            <div class="subtitle">实时网络状态监控与流量分析</div>
            <div class="datetime" id="datetime">2023年11月15日 14:30:45</div>
        </div>

        <div class="main-content">
            <div class="network-panel">
                <svg id="network-svg" viewBox="0 0 1000 500"></svg>
                <div class="tooltip" id="tooltip"></div>
            </div>

            <div class="stats-panel">
                <div class="stat-card">
                    <h3>网络状态</h3>
                    <div class="stat-value" id="network-status">正常</div>
                    <div class="stat-label">整体运行状态</div>
                    <div class="stat-trend trend-up">↑ 运行稳定</div>
                </div>

                <div class="stat-card">
                    <h3>总流量</h3>
                    <div class="stat-value" id="total-traffic">1.24</div>
                    <div class="stat-label">Gbps</div>
                    <div class="stat-trend trend-up">↑ 12.5% 同比上周</div>
                </div>

                <div class="stat-card">
                    <h3>安全事件</h3>
                    <div class="stat-value" id="security-events">3</div>
                    <div class="stat-label">今日事件数</div>
                    <div class="stat-trend trend-down">↓ 2起 同比昨日</div>
                </div>

                <div class="stat-card">
                    <h3>设备状态</h3>
                    <div class="stat-value" id="device-status">4/4</div>
                    <div class="stat-label">正常/总数</div>
                    <div class="stat-trend trend-up">↑ 全部在线</div>
                </div>
            </div>
        </div>

        <div class="alert-panel">
            <h3>实时告警</h3>
            <div class="alert-list" id="alert-list">
                <div class="alert-item">
                    <span class="alert-critical">● 关键告警</span> - 防火墙CPU使用率超过85% <span class="alert-time">14:25:30</span>
                </div>
                <div class="alert-item">
                    <span class="alert-warning">● 警告</span> - 接入交换机端口错误率升高 <span class="alert-time">13:45:12</span>
                </div>
                <div class="alert-item">
                    <span class="alert-warning">● 警告</span> - 服务器内存使用率超过80% <span class="alert-time">12:30:45</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 设备数据
        const devices = [
            {
                id: "firewall",
                name: "防火墙",
                type: "firewall",
                x: 580,
                y: 100,
                cpu: 75,
                memory: 60,
                status: "warning",
                throughput: "2.5 Gbps",
                connections: 150
            },
            {
                id: "core-switch",
                name: "核心交换机",
                type: "switch",
                x: 450,
                y: 250,
                cpu: 30,
                memory: 40,
                status: "normal",
                throughput: "5.8 Gbps",
                connections: 42
            },
            {
                id: "access-switch",
                name: "接入交换机",
                type: "switch",
                x: 700,
                y: 250,
                cpu: 45,
                memory: 35,
                status: "warning",
                throughput: "1.2 Gbps",
                connections: 24
            },
            {
                id: "server",
                name: "应用服务器",
                type: "server",
                x: 580,
                y: 450,
                cpu: 65,
                memory: 80,
                status: "normal",
                throughput: "800 Mbps",
                connections: 12
            }
        ];

        // 连接数据
        const connections = [
            { id: "link1", source: "firewall", target: "core-switch", bandwidth: 10000, traffic: 5200 },
            { id: "link2", source: "core-switch", target: "access-switch", bandwidth: 1000, traffic: 850 },
            { id: "link3", source: "access-switch", target: "server", bandwidth: 100, traffic: 65 }
        ];

        // 设备颜色映射
        const deviceColors = {
            firewall: "#e74c3c",
            switch: "#3498db",
            server: "#2ecc71"
        };

        // 状态颜色映射
        const statusColors = {
            normal: "#2ecc71",
            warning: "#f39c12",
            critical: "#e74c3c"
        };

        // 初始化网络拓扑图
        function initNetwork() {
            const svg = document.getElementById('network-svg');
            const tooltip = document.getElementById('tooltip');

            // 清空SVG内容
            svg.innerHTML = '';

            // 创建箭头标记
            const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');

            const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
            marker.setAttribute('id', 'arrowhead');
            marker.setAttribute('viewBox', '0 -5 10 10');
            marker.setAttribute('refX', 8);
            marker.setAttribute('refY', 0);
            marker.setAttribute('markerWidth', 6);
            marker.setAttribute('markerHeight', 6);
            marker.setAttribute('orient', 'auto');

            const markerPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            markerPath.setAttribute('d', 'M0,-5L10,0L0,5');
            markerPath.setAttribute('fill', '#4fc3f7');

            marker.appendChild(markerPath);
            defs.appendChild(marker);
            svg.appendChild(defs);

            // 创建连接线
            connections.forEach(conn => {
                const sourceDevice = devices.find(d => d.id === conn.source);
                const targetDevice = devices.find(d => d.id === conn.target);

                if (!sourceDevice || !targetDevice) return;

                // 创建连接线
                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                line.setAttribute('class', 'link');
                line.setAttribute('id', conn.id);
                line.setAttribute('x1', sourceDevice.x);
                line.setAttribute('y1', sourceDevice.y);
                line.setAttribute('x2', targetDevice.x);
                line.setAttribute('y2', targetDevice.y);
                line.setAttribute('marker-end', 'url(#arrowhead)');

                // 创建数据流动画
                const flowLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                flowLine.setAttribute('class', 'link data-flow');
                flowLine.setAttribute('x1', sourceDevice.x);
                flowLine.setAttribute('y1', sourceDevice.y);
                flowLine.setAttribute('x2', targetDevice.x);
                flowLine.setAttribute('y2', targetDevice.y);
                flowLine.setAttribute('stroke', getTrafficColor(conn.traffic / conn.bandwidth));
                flowLine.setAttribute('stroke-width', '3');
                flowLine.setAttribute('stroke-dasharray', '10,5');

                // 添加悬浮事件
                line.addEventListener('mouseover', function(e) {
                    const rect = svg.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;

                    const utilization = (conn.traffic / conn.bandwidth) * 100;

                    tooltip.innerHTML = `
                        <h3>连接信息</h3>
                        <p><strong>源设备:</strong> ${sourceDevice.name}</p>
                        <p><strong>目标设备:</strong> ${targetDevice.name}</p>
                        <p><strong>带宽:</strong> ${conn.bandwidth} Mbps</p>
                        <p><strong>当前流量:</strong> ${conn.traffic} Mbps</p>
                        <p><strong>利用率:</strong> ${utilization.toFixed(1)}%</p>
                        <p><strong>状态:</strong> <span class="status-indicator status-${utilization > 80 ? 'critical' : utilization > 60 ? 'warning' : 'normal'}"></span> ${utilization > 80 ? '高负载' : utilization > 60 ? '中等负载' : '正常'}</p>
                    `;
                    tooltip.style.left = (x + 10) + 'px';
                    tooltip.style.top = (y - 10) + 'px';
                    tooltip.style.opacity = '1';

                    // 高亮连接线
                    line.style.stroke = '#4fc3f7';
                    line.style.strokeWidth = '3';
                    flowLine.style.strokeWidth = '5';
                });

                line.addEventListener('mouseout', function() {
                    tooltip.style.opacity = '0';
                    line.style.stroke = 'rgba(79, 195, 247, 0.7)';
                    line.style.strokeWidth = '2';
                    flowLine.style.strokeWidth = '3';
                });

                svg.appendChild(line);
                svg.appendChild(flowLine);

                // 创建流量标签
                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                text.setAttribute('class', 'link-label pulse');
                text.setAttribute('x', (sourceDevice.x + targetDevice.x) / 2);
                text.setAttribute('y', (sourceDevice.y + targetDevice.y) / 2 - 10);
                text.textContent = `${conn.traffic} Mbps`;

                svg.appendChild(text);

                // 创建利用率标签
                const utilizationText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                utilizationText.setAttribute('class', 'link-label');
                utilizationText.setAttribute('x', (sourceDevice.x + targetDevice.x) / 2);
                utilizationText.setAttribute('y', (sourceDevice.y + targetDevice.y) / 2 + 5);
                utilizationText.textContent = `${((conn.traffic / conn.bandwidth) * 100).toFixed(1)}%`;
                utilizationText.setAttribute('fill', getTrafficColor(conn.traffic / conn.bandwidth));

                svg.appendChild(utilizationText);
            });

            // 创建设备
            devices.forEach(device => {
                const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
                group.setAttribute('class', 'node');
                group.setAttribute('id', device.id);

                // 创建设备矩形
                const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                rect.setAttribute('width', '100');
                rect.setAttribute('height', '60');
                rect.setAttribute('x', device.x - 50);
                rect.setAttribute('y', device.y - 30);
                rect.setAttribute('rx', '8');
                rect.setAttribute('fill', deviceColors[device.type]);
                rect.setAttribute('stroke', statusColors[device.status]);
                rect.setAttribute('stroke-width', '3');

                // 创建设备标签
                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                text.setAttribute('class', 'node-label');
                text.setAttribute('x', device.x);
                text.setAttribute('y', device.y + 26);
                text.textContent = device.name;

                // 创建设备状态指示器
                const statusIndicator = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                statusIndicator.setAttribute('cx', device.x - 35);
                statusIndicator.setAttribute('cy', device.y - 15);
                statusIndicator.setAttribute('r', '5');
                statusIndicator.setAttribute('fill', statusColors[device.status]);
                statusIndicator.setAttribute('class', 'pulse');

                group.appendChild(rect);
                group.appendChild(statusIndicator);
                group.appendChild(text);

                // 添加设备图标
                addDeviceIcon(group, device);

                // 添加悬浮事件
                group.addEventListener('mouseover', function(e) {
                    const rect = svg.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;

                    tooltip.innerHTML = `
                        <h3>${device.name}</h3>
                        <p><strong>类型:</strong> ${getDeviceTypeName(device.type)}</p>
                        <p><strong>状态:</strong> <span class="status-indicator status-${device.status}"></span> ${getStatusText(device.status)}</p>
                        <p><strong>CPU使用率:</strong> ${device.cpu}%</p>
                        <p><strong>内存使用率:</strong> ${device.memory}%</p>
                        <p><strong>吞吐量:</strong> ${device.throughput}</p>
                        <p><strong>连接数:</strong> ${device.connections}</p>
                    `;
                    tooltip.style.left = (x + 10) + 'px';
                    tooltip.style.top = (y - 10) + 'px';
                    tooltip.style.opacity = '1';

                    // 高亮设备
                    group.style.filter = 'drop-shadow(0 0 15px rgba(0, 150, 255, 0.8))';
                    group.style.transform = 'scale(1.05)';
                });

                group.addEventListener('mouseout', function() {
                    tooltip.style.opacity = '0';
                    group.style.filter = 'drop-shadow(0 0 5px rgba(0, 150, 255, 0.5))';
                    group.style.transform = 'scale(1)';
                });

                svg.appendChild(group);
            });

            // 添加标题和背景元素
            addDashboardElements(svg);
        }

        // 添加设备图标
        function addDeviceIcon(group, device) {
            const iconGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');

            switch(device.type) {
                case 'firewall':
                    // 防火墙图标 - 盾牌形状
                    const shield = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                    shield.setAttribute('d', `M ${device.x-15} ${device.y-10} L ${device.x} ${device.y-20} L ${device.x+15} ${device.y-10} L ${device.x+10} ${device.y+10} L ${device.x-10} ${device.y+10} Z`);
                    shield.setAttribute('fill', 'white');
                    iconGroup.appendChild(shield);

                    const lock = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                    lock.setAttribute('x', device.x-5);
                    lock.setAttribute('y', device.y-5);
                    lock.setAttribute('width', '10');
                    lock.setAttribute('height', '8');
                    lock.setAttribute('fill', deviceColors.firewall);
                    iconGroup.appendChild(lock);
                    break;

                case 'switch':
                    // 交换机图标 - 矩形加端口线
                    const switchRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                    switchRect.setAttribute('x', device.x - 20);
                    switchRect.setAttribute('y', device.y - 10);
                    switchRect.setAttribute('width', '40');
                    switchRect.setAttribute('height', '20');
                    switchRect.setAttribute('fill', 'white');
                    switchRect.setAttribute('rx', '3');
                    iconGroup.appendChild(switchRect);

                    for (let i = 0; i < 4; i++) {
                        const portLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                        portLine.setAttribute('x1', device.x - 15 + i * 10);
                        portLine.setAttribute('y1', device.y - 10);
                        portLine.setAttribute('x2', device.x - 15 + i * 10);
                        portLine.setAttribute('y2', device.y + 10);
                        portLine.setAttribute('stroke', deviceColors.switch);
                        portLine.setAttribute('stroke-width', '2');
                        iconGroup.appendChild(portLine);
                    }
                    break;

                case 'server':
                    // 服务器图标 - 机架式
                    const serverRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                    serverRect.setAttribute('x', device.x - 20);
                    serverRect.setAttribute('y', device.y - 15);
                    serverRect.setAttribute('width', '40');
                    serverRect.setAttribute('height', '30');
                    serverRect.setAttribute('fill', 'white');
                    serverRect.setAttribute('rx', '3');
                    iconGroup.appendChild(serverRect);

                    for (let i = 0; i < 3; i++) {
                        const serverLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                        serverLine.setAttribute('x1', device.x - 15);
                        serverLine.setAttribute('y1', device.y - 10 + i * 10);
                        serverLine.setAttribute('x2', device.x + 15);
                        serverLine.setAttribute('y2', device.y - 10 + i * 10);
                        serverLine.setAttribute('stroke', deviceColors.server);
                        serverLine.setAttribute('stroke-width', '1');
                        iconGroup.appendChild(serverLine);
                    }
                    break;
            }

            group.appendChild(iconGroup);
        }

        // 添加大屏元素
        function addDashboardElements(svg) {
            // 添加标题
            const title = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            title.setAttribute('x', 500);
            title.setAttribute('y', 40);
            title.setAttribute('text-anchor', 'middle');
            title.setAttribute('fill', '#4fc3f7');
            title.setAttribute('font-size', '24');
            title.setAttribute('font-weight', 'bold');
            title.textContent = '网络拓扑图';
            svg.appendChild(title);

            // 添加网格背景
            for (let i = 0; i <= 1000; i += 50) {
                const gridLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                gridLine.setAttribute('x1', i);
                gridLine.setAttribute('y1', 0);
                gridLine.setAttribute('x2', i);
                gridLine.setAttribute('y2', 500);
                gridLine.setAttribute('stroke', 'rgba(79, 195, 247, 0.1)');
                gridLine.setAttribute('stroke-width', '1');
                svg.appendChild(gridLine);
            }

            for (let i = 0; i <= 500; i += 50) {
                const gridLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                gridLine.setAttribute('x1', 0);
                gridLine.setAttribute('y1', i);
                gridLine.setAttribute('x2', 1000);
                gridLine.setAttribute('y2', i);
                gridLine.setAttribute('stroke', 'rgba(79, 195, 247, 0.1)');
                gridLine.setAttribute('stroke-width', '1');
                svg.appendChild(gridLine);
            }
        }

        // 获取设备类型名称
        function getDeviceTypeName(type) {
            const typeNames = {
                firewall: "防火墙",
                switch: "交换机",
                server: "服务器"
            };
            return typeNames[type] || type;
        }

        // 获取状态文本
        function getStatusText(status) {
            const statusTexts = {
                normal: "正常",
                warning: "警告",
                critical: "严重"
            };
            return statusTexts[status] || status;
        }

        // 根据流量利用率获取颜色
        function getTrafficColor(utilization) {
            if (utilization > 0.8) return '#e74c3c';
            if (utilization > 0.6) return '#f39c12';
            return '#2ecc71';
        }

        // 更新流量数据
        function updateTraffic() {
            const svg = document.getElementById('network-svg');

            connections.forEach(conn => {
                // 随机变化流量，但不超过带宽
                const change = (Math.random() - 0.5) * 50;
                conn.traffic = Math.max(10, Math.min(conn.bandwidth * 0.95, conn.traffic + change));
            });

            // 更新流量标签
            const linkLabels = svg.querySelectorAll('.link-label');
            linkLabels.forEach((label, index) => {
                if (index < connections.length * 2) {
                    if (index % 2 === 0) {
                        // 流量值
                        label.textContent = `${Math.floor(connections[Math.floor(index/2)].traffic)} Mbps`;
                    } else {
                        // 利用率
                        const connIndex = Math.floor((index-1)/2);
                        const utilization = (connections[connIndex].traffic / connections[connIndex].bandwidth) * 100;
                        label.textContent = `${utilization.toFixed(1)}%`;
                        label.setAttribute('fill', getTrafficColor(utilization/100));
                    }
                }
            });

            // 更新数据流颜色
            const flowLines = svg.querySelectorAll('.data-flow');
            flowLines.forEach((line, index) => {
                if (index < connections.length) {
                    const utilization = connections[index].traffic / connections[index].bandwidth;
                    line.setAttribute('stroke', getTrafficColor(utilization));
                }
            });

            // 更新统计信息
            updateStats();
        }

        // 更新统计信息
        function updateStats() {
            // 计算总流量
            let totalTraffic = 0;
            connections.forEach(conn => {
                totalTraffic += conn.traffic;
            });
            totalTraffic = (totalTraffic / 1000).toFixed(2);
            document.getElementById('total-traffic').textContent = totalTraffic;

            // 随机更新安全事件
            const securityEvents = Math.floor(Math.random() * 5);
            document.getElementById('security-events').textContent = securityEvents;

            // 随机更新设备状态
            devices.forEach(device => {
                // 随机改变设备状态
                if (Math.random() > 0.8) {
                    device.status = Math.random() > 0.7 ? 'warning' : 'normal';
                    device.cpu = Math.floor(Math.random() * 40) + 30;
                    device.memory = Math.floor(Math.random() * 40) + 30;

                    // 更新设备状态指示器
                    const indicator = document.querySelector(`#${device.id} circle`);
                    if (indicator) {
                        indicator.setAttribute('fill', statusColors[device.status]);
                    }

                    // 更新设备边框颜色
                    const rect = document.querySelector(`#${device.id} rect`);
                    if (rect) {
                        rect.setAttribute('stroke', statusColors[device.status]);
                    }
                }
            });

            // 计算正常设备数量
            const normalDevices = devices.filter(d => d.status === 'normal').length;
            document.getElementById('device-status').textContent = `${normalDevices}/${devices.length}`;

            // 更新网络状态
            const networkStatus = normalDevices === devices.length ? '正常' : '警告';
            document.getElementById('network-status').textContent = networkStatus;
        }

        // 更新日期时间
        function updateDateTime() {
            const now = new Date();
            const options = {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            };
            document.getElementById('datetime').textContent = now.toLocaleDateString('zh-CN', options);
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            initNetwork();
            updateDateTime();

            // 每秒更新一次时间和流量
            setInterval(() => {
                updateDateTime();
                updateTraffic();
            }, 1000);

            // 每5秒更新一次设备状态
            setInterval(() => {
                updateStats();
            }, 5000);
        });
    </script>
</body>
</html>